<template>
  <div class="manage-record">
    <div class="record-header">
      <div class="record-tabs">
        <div
          v-for="record in records"
          :key="record.code"
          :class="{
            'record-tab': selectCode !== record.code,
            'record-selected': selectCode === record.code,
          }"
          @click="changeCode(record.code)"
        >
          {{ record.label }}
        </div>
      </div>
      <div class="record-refresh" @click="getRelatedLog">
        <i class="jeicon jeicon-refresh"></i>
      </div>
    </div>
    <div class="record-main">
      <div v-show="selectCode == 'active' && activeLogList.length > 0" class="record-info">
        <div v-for="logItem in activeLogList" :key="logItem.JE_RBAC_ACCOUNT_ID" class="record-item">
          <div class="record-left">
            <div
              v-if="logItem.ACCOUNT_AVATAR != '' && logItem.ACCOUNT_AVATAR"
              class="recore-avatar"
            >
              <img :src="formatAvatar(logItem.ACCOUNT_AVATAR)" alt="" />
            </div>
            <div
              v-if="logItem.ACCOUNT_AVATAR == '' || !logItem.ACCOUNT_AVATAR"
              class="record-photo"
              v-text="formatName(logItem.BURY_ACCOUNT_NAME)"
            ></div>
            <div class="record-content">{{ logItem.BURY_ACCOUNT_NAME }}</div>
          </div>
          <div class="record-date">{{ logItem.SY_CREATETIME }}</div>
        </div>
      </div>
      <div v-show="selectCode == 'login' && loginList.length > 0" class="record-info">
        <div v-for="logItem in loginList" :key="logItem.JE_RBAC_LOGINLOG_ID" class="record-item">
          <div class="record-left">
            <div
              v-if="logItem.ACCOUNT_AVATAR != '' && logItem.ACCOUNT_AVATAR"
              class="recore-avatar"
            >
              <img :src="formatAvatar(logItem.ACCOUNT_AVATAR)" alt="" />
            </div>
            <div
              v-if="logItem.ACCOUNT_AVATAR == '' || !logItem.ACCOUNT_AVATAR"
              class="record-photo"
              v-text="formatName(logItem.LOGINLOG_ACCOUNT_NAME)"
            ></div>
            <div class="record-content">{{ logItem.LOGINLOG_ACCOUNT_NAME }}登录了系统</div>
          </div>
          <div class="record-date">{{ logItem.SY_CREATETIME }}</div>
        </div>
      </div>
      <div v-show="selectCode == 'assess' && assessList.length > 0" class="record-info">
        <div v-for="logItem in assessList" :key="logItem.JE_RBAC_BURY_ID" class="record-item">
          <div class="record-left">
            <div
              v-if="logItem.ACCOUNT_AVATAR != '' && logItem.ACCOUNT_AVATAR"
              class="recore-avatar"
            >
              <img :src="formatAvatar(logItem.ACCOUNT_AVATAR)" alt="" />
            </div>
            <div
              v-if="logItem.ACCOUNT_AVATAR == '' || !logItem.ACCOUNT_AVATAR"
              class="record-photo"
              v-text="formatName(logItem.BURY_ACCOUNT_NAME)"
            ></div>
            <div class="record-content"
              >{{ logItem.BURY_ACCOUNT_NAME }}访问了【{{ logItem.BURY_OBJECT_NAME }}】</div
            >
          </div>
          <div class="record-date">{{ logItem.SY_CREATETIME }}</div>
        </div>
      </div>
      <div class="record-detail-page">
        <je-pagebar
          v-show="selectCode == 'active' && activeLogList.length > 0"
          :page-size="activePage.limit"
          :total-count="activePage.totalCount"
          :show-refresh="false"
          @load="buildPageData"
        ></je-pagebar>
        <je-pagebar
          v-show="selectCode == 'login' && loginList.length > 0"
          :page-size="loginPage.limit"
          :total-count="loginPage.totalCount"
          :show-refresh="false"
          @load="buildPageData"
        ></je-pagebar>
        <je-pagebar
          v-show="selectCode == 'assess' && assessList.length > 0"
          :page-size="assessPage.limit"
          :total-count="assessPage.totalCount"
          :show-refresh="false"
          @load="buildPageData"
        ></je-pagebar>
      </div>
      <div v-loading="loading"></div>
      <div
        v-show="selectCode == 'active' && activeLogList.length == 0 && !loading"
        class="no-data-box"
      >
        <img :src="noData" alt="" />
        <div class="no-data-explain">暂无数据～</div>
      </div>
      <div v-show="selectCode == 'login' && loginList.length == 0 && !loading" class="no-data-box">
        <img :src="noData" alt="" />
        <div class="no-data-explain">暂无数据～</div>
      </div>
      <div
        v-show="selectCode == 'assess' && assessList.length == 0 && !loading"
        class="no-data-box"
      >
        <img :src="noData" alt="" />
        <div class="no-data-explain">暂无数据～</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue';
  import { useI18n } from '@common/locales';
  import { getFileUrlByKey, decode } from '@jecloud/utils';
  import JePagebar from '@/components/page-bar.vue';
  import noData from '@/assets/no-data.png';
  import { GetTwoHoursActive, GetLoginLogList, GetBuryList } from '@/api';
  export default defineComponent({
    name: 'RecordDetail',
    components: {
      JePagebar,
    },
    setup() {
      const t = useI18n().t;
      let selectCode = ref('active');
      let loading = ref(true); //请求数据loading
      const state = reactive({
        records: [
          { label: t('manageBoard.activeRecord'), code: 'active' },
          { label: t('manageBoard.loginRecord'), code: 'login' },
          { label: t('manageBoard.assessRecord'), code: 'assess' },
        ],
        activeMenuId: 'active', //默认选中项
        activeStart: 1, //2小时内活跃人员开始页
        loginStart: 1, //登录详情记录开始页
        assessStart: 1, //访问详情记录开始页
        activePage: {
          //2小时内活跃人员分页
          start: 1,
          limit: 10,
          totalCount: 0,
        },
        loginPage: {
          //登录详情记录分页
          start: 1,
          limit: 10,
          totalCount: 0,
        },
        assessPage: {
          //访问详情记录分页
          start: 1,
          limit: 10,
          totalCount: 0,
        },
        activeLogList: [], //活跃人数列表
        loginList: [], //登录详情列表
        assessList: [], //访问列表
        noData: noData, //缺省图
      });
      const methods = {
        changeCode(code) {
          selectCode.value = code;
          switch (selectCode.value) {
            case 'active':
              state.activePage.start = state.activeStart;
              break;
            case 'login':
              state.loginPage.start = state.loginStart;
              break;
            case 'assess':
              state.assessPage.start = state.assessStart;
              break;
            default:
              break;
          }
          methods.getRelatedLog();
        },
        buildPageData(pageInfo) {
          switch (selectCode.value) {
            case 'active':
              state.activeStart = pageInfo.page;
              state.activePage.limit = pageInfo.limit;
              break;
            case 'login':
              state.loginStart = pageInfo.page;
              state.loginPage.limit = pageInfo.limit;
              break;
            case 'assess':
              state.assessStart = pageInfo.page;
              state.assessPage.limit = pageInfo.limit;
              break;
            default:
              break;
          }
          methods.getRelatedLog();
        },
        getTwoHoursData() {
          state.activePage.start = state.activeStart;
          GetTwoHoursActive(state.activePage).then((res) => {
            if (res.code == 1000 && res.success) {
              let resData = res.data;
              state.activeLogList = resData.records;
              state.activePage.totalCount = resData.total;
              state.activePage.limit = resData.limit;
              setTimeout(() => {
                loading.value = false;
              }, 300);
            }
          });
        },
        getLoginLogData() {
          state.loginPage.start = state.loginStart;
          GetLoginLogList(state.loginPage).then((res) => {
            if (res.code == 1000 && res.success) {
              let resData = res.data;
              state.loginList = resData.records;
              state.loginPage.totalCount = resData.total;
              state.loginPage.limit = resData.limit;
              setTimeout(() => {
                loading.value = false;
              }, 300);
            }
          });
        },
        getBuryListData() {
          state.assessPage.start = state.assessStart;
          GetBuryList(state.assessPage).then((res) => {
            if (res.code == 1000 && res.success) {
              let resData = res.data;
              state.assessList = resData.records;
              state.assessPage.totalCount = resData.total;
              state.assessPage.limit = resData.limit;
              setTimeout(() => {
                loading.value = false;
              }, 300);
            }
          });
        },
        getRelatedLog() {
          //获取相关选项下的日志记录 curCode = selectCode.val
          loading.value = true;
          switch (selectCode.value) {
            case 'active':
              methods.getTwoHoursData();
              break;
            case 'login':
              methods.getLoginLogData();
              break;
            case 'assess':
              methods.getBuryListData();
              break;
            default:
              break;
          }
        },
        formatName(name) {
          //格式化名字
          if (name) {
            return name.slice(name.length - 2);
          }
        },
        formatAvatar(avatarStr) {
          //头像转换
          const avatarObj = decode(avatarStr);
          return getFileUrlByKey(avatarObj[0].fileKey);
        },
      };
      onMounted(() => {
        methods.getRelatedLog();
      });
      return {
        selectCode,
        loading,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .manage-record .je-loading {
    height: 476px;
    background-color: rgba(255, 255, 255, 0.6);
    transition: opacity 0.3s;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .manage-record .je-vue-pagebar .ant-btn {
    background: #ffffff;
    border: 1px solid #dbdbdb;
  }
</style>
<style scoped lang="less">
  .manage-record {
    width: 100%;
    height: 546px;
    margin-top: 20px;
    border-radius: 4px;
    background-color: #ffffff;
    .record-header {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 0 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #dcdcde;
      .record-tabs {
        display: inline-flex;
        align-items: center;
        .record-tab {
          height: 60px;
          line-height: 60px;
          box-sizing: border-box;
          font-size: 16px;
          font-weight: bold;
          color: #a9aba9;
          margin-right: 40px;
          cursor: pointer;
        }
        .record-tab:hover {
          color: @primary-color;
        }
        .record-selected {
          height: 60px;
          line-height: 60px;
          box-sizing: border-box;
          font-size: 16px;
          font-weight: bold;
          margin-right: 40px;
          color: @primary-color;
          border-bottom: 2px solid @primary-color;
        }
      }
      .record-refresh {
        color: #606266;
        cursor: pointer;
      }
    }
    .record-main {
      width: 100%;
      position: relative;
    }
    .record-info {
      width: 100%;
      height: 440px;
      padding: 0 30px 0 20px;
      z-index: 1;
      .record-item {
        width: 100%;
        height: 44px;
        display: flex;
        padding-top: 10px;
        justify-content: space-between;
        align-items: center;
        .record-left {
          display: flex;
          align-items: center;
          .record-photo {
            width: 34px;
            height: 34px;
            line-height: 34px;
            border-radius: 50%;
            background-color: #efa544;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
            margin-right: 10px;
          }
          .recore-avatar {
            width: 34px;
            height: 34px;
            text-align: center;
            border-radius: 100%;
            margin-right: 10px;
            img {
              width: 34px;
              height: 34px;
              border-radius: 100%;
            }
          }
        }
        .record-content,
        .record-date {
          font-size: 14px;
          color: #3f3f3f;
        }
      }
    }
    .record-detail-page {
      width: 100%;
      height: 46px;
      box-sizing: border-box;
      padding: 10px 30px 10px 20px;
    }
    .no-data-box {
      width: 100%;
      img {
        display: block;
        width: 319px;
        height: 194px;
        margin: 89px auto 0;
      }
      .no-data-explain {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #a9aba9;
        padding-top: 20px;
      }
    }
  }
</style>
